<div id="dialog_create_group" title="Create a permission group" >
    <fieldset>
        <legend>Enter group information</legend>
        <table>
            <tr>
                <td>
                    *Name:
                </td>
                <td>
                    <input type="text" name="txt_group_name" id="txt_group_name"/>
                </td>
            </tr>
            <tr>
                <td>
                    Description:
                </td>
                <td>
                    <input type="text" size="50" name="txt_group_desc" id="txt_group_desc" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="right">
                    <input type="button" value="create" id="btn_create" onclick="save_group()" />
                </td>
            </tr>
        </table>
    </fieldset>
</div>
<form method="post" action="{{$base_index_url}}/acl/admin/groups/" name="refresh_page">
    <input type="hidden" name="ui_tab_index" value="1"/>
</form>
<script type="text/javascript" >    
    var $new_group_dialog = $("#dialog_create_group").dialog({ autoOpen: false,modal:true,width:'auto' })
    function show_new_group_dialog(){
        $new_group_dialog.dialog('open');
    }
    function delete_group(self){
        var id = self.value;
        if(confirm('You sure you want to delete the group?')){
            $.ajax({
                type:"POST",
                dataType:'text',
                data:"is_ajax=1&group_id="+id,
                url: module_admin_url+"/groups/delete_group",
                beforeSend: function(){
                     $.blockUI("<h1>Please wait...</h1>");
                },
                complete :  function(data){
                    $.unblockUI();
                    if(data.responseText!=="nok"){
                        var row_id = "#row-"+id;
                        $(row_id).fadeOut('slow');
                    }else{
                        alert("Could not delete the group!");
                    }
                }
            });
        }
    }
    function save_group(){
        var name =  $("#txt_group_name").val();
        var description = $("#txt_group_desc").val();
        if(name && $.trim(name).length>0){
            $.ajax({
                type:"POST",
                dataType:'text',
                data:"is_ajax=1&group_name="+name+"&group_desc="+description,
                url: module_admin_url+"/groups/create_group",
                complete :  function(data){
                    if(data.responseText!=="nok"){
                        $new_group_dialog.dialog("close");
                       // $("#btn_create").css("disabled",true);
//                        var row_id = "row-"+data.responseText;
//                        $('#table tr:first').after("<tr style='color:green' class='table_row' id='"+row_id+"'><td>"+name+'</td><td>'+description+'</td><td>'+"<button  value='"+data.responseText+"' onclick =delete_group(this)>Delete</button>"+'</td> </tr>');
//                        $("#"+row_id).animate({ Color: "black" },{duration:3000});
                          $.blockUI("<h1>Please wait...</h1>");
                          document.forms.refresh_page.submit();
                    
                    }else{
                        alert("Could not create the group!");
                    }
                }
            });
        }else{
            alert("Groups name is required!");
        }

        
    }
</script>
<div>
    <button onclick="show_new_group_dialog()">Create New Group</button>
</div>
<hr/>
<table id="table" width="100%" >
    <thead>
        <tr>
            <th>Group Name</th>
            <th>Description</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        {{foreach from=$groups item=group}}
        <tr class="table_row" id="row-{{$group->id}}">
            <td>
                {{$group->name}}
            </td>
            <td>
                {{$group->description}}
            </td>
            <td>
                {{if $group->id<>"1"}}
                <button value="{{$group->id}}" onclick =delete_group(this)>Delete</button>
                {{else}}
                <input type='button' value="not allowed" disabled />
                {{/if}}

            </td>

        </tr>

        {{/foreach}}
    </tbody>
</table>
